<template>
  <f7-list media-list class="shared_song_box ">
    <f7-list-item
      link="#"
      :title="songData.songName?songData.songName:songData.name"
      :subtitle="songData.sharedTime"
      :text="songData.description?songData.description:'写点什么吧...'"
      @click="handleSongClick()"
      class="elevation-demo elevation-6 elevation-hover-24 elevation-pressed-12 elevation-transition"
    >
      <div slot="media" class="media-div">
        <div class="img-cover">
          <svg-icon iconClass="shared_play_white" v-if="!isPlayingThis" />
          <svg-icon iconClass="shared_playing_white" v-else />
        </div>
        <img
          :src="songData.coverUrl?songData.coverUrl:'/static/song_cover.jpg'"
          width="80"
          height="80"
          class="lazy lazy-fade-in demo-lazy"
        />
      </div>
      <img  
        slot="after"
        :src="from==='shared'?(songData.headerImgUrl?songData.headerImgUrl:'/static/user_header.jpg'):getUserInfo.headerImgUrl?getUserInfo.headerImgUrl:'/static/user_header.jpg'"
        class="lazy lazy-fade-in demo-lazy user_avatar"
      />
    </f7-list-item>
  </f7-list>
</template>
<script>
import { mapGetters,mapActions } from 'vuex'
export default {
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters({
      getUserInfo: 'getUserInfo',
      nowSong: 'nowSong',
      getPlayState:'getPlayState',
    }),
    isPlayingThis(){
      if (this.nowSong.songId == this.songData.songId && this.getPlayState){
        return true;
      }
      else {
        return false;
      }
    },

  },
  props: {
    songData: {
      type: Object,
    },
    from:{
      type:String,
      default:'',
    }
  },
  watch:{
    songData:{
      handler(e){
        console.log(e,'songData....');
      },
      deep:true,
    },
    from:{
      handler(e){
        console.log(e,'songData....');
      },
     
    }
  },
  methods: {
    ...mapActions({
      playMust: 'playMust',
      sendandchangeMusic:'sendandchangeMusic',
    }),
    handleSongClick() {
      if (
        this.getPlayState &&
        this.nowSong.songId === this.songData.songId
      ) {
      } else {
        this.sendandchangeMusic(Object.assign(this.songData,{name:this.songData.songName}))
        this.playMust()
      }
      
    },
  },
}
</script>

<style lang="scss" scoped>
.light{
  $spanColor: #212121;
  $spanSubColor: #666666;
  $backgroundSubColor: #d4c3c3;
  .list.media-list /deep/ ul{
    background-color: $backgroundSubColor;
    .item-title{
      color:$spanColor
    }
    .item-subtitle{
      color:$spanSubColor
    }
    .item-text{
      color:$spanSubColor
    }
    
  }
}
.dark{
  $spanColor: #ffffff;
  $spanSubColor: #f0f0f0;
  $backgroundSubColor: #592e2e;
  .list.media-list /deep/ ul{
    background-color: $backgroundSubColor;
    .item-title{
      color:$spanColor
    }
    .item-subtitle{
      color:$spanSubColor
    }
    .item-text{
      color:$spanSubColor
    }
  }
}
.shared_song_box {
  .media-div {
    position: relative;
    .img-cover {
      position: absolute;
      width: 100%;
      height: 0.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #000000;
      opacity: 0.5;
      .svg-icon {
        width: 0.4rem;
      }
      border-radius:50%;
    }
    img{
      border-radius:50%;
    }
  }
  .user_avatar{
    border-radius: 50%;
    width:0.2rem;
    height:0.2rem;
  }

}
</style>
